<template>
    <div>
        <!-- <div>
            {{this.$store.getters.nameInfo}}
            {{ this.$store.state.name}}
        </div>
        <el-button type='warning' @click="disport">
            点击我
        </el-button>
        <div id="app">
            <input type="text" v-model="firstname">+
            <input type="text" v-model="lastname">=
            <input type="text" v-model="fullname">
        </div>
        <div class="home">
            <h1>{{city}}</h1>
            <router-link tag='button' to="/userList">获取城市列表</router-link>
        </div>
        <el-select v-model="connectorId" filterable clearable>
            <el-option v-for="(item,index) in workConstrucList" :key="index" :label="item.label" :value="item.value">
            </el-option>
        </el-select> -->
        <el-table :data="tableData" ref="singleTable" highlight-current-row height="670" style="width: 100%">
            <el-table-column type="index" :index="indexMethod" width="50">
            </el-table-column>
            <el-table-column prop="title" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="id" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="cover" label="地址" width="180">
            </el-table-column>
            <!-- 渲染html的列 -->
            <el-table-column label="图片">
                          <template slot-scope="scope">
                                                <img :src="scope.row.cover" width="100" height="100" />
                                        </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(indexMethod(scope.$index), scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableConfig.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="tableConfig.pageSize" layout="sizes,total,prev,pager,next" :total="tableConfig.total">
            </el-pagination>
        </div>
        <!-- <el-button @click="select">打我啊</el-button> -->
    </div>
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
import {test} from '../../src/service/index'
    export default {
        name: 'shop',
        data: function() {
            return {
                tableConfig: {
                    column: '',
                    order: '',
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                },
                tableData: [],
                connectorId: '',
                workConstrucList: [],
                firstname: '',
                lastname: '',
                // fullname: ''
            }
        },
        watch: {
            // firstname(newVal) {
            //     this.fullname = newVal + '-' + this.lastname
            // },
            // lastname(newVal) {
            //     this.fullname = this.firstname + '-' + newVal
            // }
        },

        computed: {
            fullname() {
                return this.firstname + "-" + this.lastname
            },
            city() {
                return this.$store.getters.getCityFn;
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.select();
            })
        },
        methods: {
            // 删除
            handleDelete(index, row) {
                this.tableData.splice(index, 1)
            },
            // 接口
            select() {
                //获取百度图片识别的token
                // this.$axios.get("/baiduApi/users/proxy"
                this.$axios.get("/baiduApi/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8&page_limit=50&page_start=0").then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        let data = res.data.subjects;
                        this.tableData.push(...data);
                    }
                })
            },
            //   接口

            // window.location.href ='http://192.168.84.78:8080/exportWord';

            // select() {
            // //     //获取百度图片识别的token
            // //     // this.$axios.get("/baiduApi/users/proxy"
            //     this.$axios.get("/baidu/s?wd=aj").then(res => {
            //         console.log(res);
            //         if (res.status == 200) {
            //             let data = res.data.subjects;
            //             this.tableData.push(...data);
            //         }
            //     })
            // },
            //  select() {
            // //     //获取百度图片识别的token
            // //     // this.$axios.get("/baiduApi/users/proxy"
            //   test().then(Response => {
            //         console.log(Response);
            //         // if (res.status == 200) {
            //         //     let data = res.data.subjects;
            //         //     this.tableData.push(...data);
            //         // }
            //     })
            // },
            disport() {
                // this.$store.state.name
                this.$store.commit('edits', 666666666666);
                // this.$store.dispatch('aEdit', {
                //     age: 15
                // })
                // let arr = [1, 3, 5, 5, 4, 3, 32, 4, 7];
                // // let set = new Set(arr);
                // let set = new Set(arr);
                // console.log("set", set);

                // let bb = Array.from(set);
                // console.log('111', bb);

                // this.$ajax.get('https://www.runoob.com/try/ajax/json_demo.json')
                //     .then(response => (this.info = response))
                //     .catch(function(error) { // 请求失败处理
                //         console.log(error);
                //     });
            },
            handleSizeChange(val) {
                this.tableConfig.currentPage = 1;
                this.tableConfig.pageSize = val
                this.productListInfo()
            },
            handleCurrentChange(val) {
                this.tableConfig.currentPage = val
                this.productListInfo()
            },
        },
    }
</script>

<style scoped>
    .pages {
        margin-top: 10px;
        text-align: right;
    }
</style>